<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue';
import { systemIpDenyApi as systemApi } from '@/api/controller';
import { ToastSuccess, Toastloading } from '@/utils/public';
import Pagination from "@/components/Pagination/index.vue";
import configForm from './configForm.vue';
import { ElMessageBox } from 'element-plus';
const configFormRef = ref()
const action = reactive({
  total: 0,
  list: [] as any[],
})
const listQuery = reactive({
  page: 1,
  limit: 20,
  key: ""
})
const handleSerach = () => {
  listQuery.page = 1
  getList()
}
const handleForm = (row: any = {}) => {
  configFormRef.value.openDialog(row)
}
const handleStatus = (row: any = {}, status: number) => {
  const { ip = '', id } = row
  ElMessageBox.confirm(`确定${status == 1 ? '启用' : '禁用'}ip：${ip}吗？`, '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      const loading = Toastloading()
      systemApi.updateStatus(id, status).then(() => {
        ToastSuccess('操作成功')
        getList()
      }).catch(() => {
        loading.close()
      })
    })
}
const handleDel = (row: any = {}) => {
  const { ip = '', id } = row
  ElMessageBox.confirm(`确定删除ip：${ip}吗？`, '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      const loading = Toastloading()
      systemApi.delSystems(id).then(() => {
        ToastSuccess('删除成功')
        getList()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    }).catch(() => { })
}
const getList = async () => {
  const loading = Toastloading()
  const res = await systemApi.getSystemsList(listQuery)
  loading.close()
  const { data = [], total = 0 } = res.data
  action.total = total
  action.list = data
}
onMounted(() => {
  getList()
})
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem" style="display:none;">
          <div class="label">键名：</div>
          <el-input v-model="listQuery.key" clearable placeholder="请输入键名" class="xm-width200" />
        </div>
        <div class="labelItem">
          <el-button style="display:none;" type="primary" @click="handleSerach">查询</el-button>
          <el-button type="primary" @click="handleForm">新增</el-button>
        </div>
      </div>
    </div>
    <el-table class="xm-main xm-TableCenter" :data="action.list" border>
      <el-table-column width="90" prop="id" label="编号" />
      <el-table-column min-width="100" prop="ip" label="IP" />
      <el-table-column min-width="100" prop="limit_name" label="账号" />
      <el-table-column min-width="100" label="状态">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 0">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column min-width="100" prop="remark" label="备注" />
      <el-table-column width="160" label="操作">
        <template #default="scoped">
          <el-button v-if="scoped.row.status == 0" type="primary" @click="handleStatus(scoped.row, 1)">启用</el-button>
          <el-button v-if="scoped.row.status == 1" type="danger" @click="handleStatus(scoped.row, 0)">禁用</el-button>
          <el-button type="danger" @click="handleDel(scoped.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <configForm ref="configFormRef" @update-list="getList" />
  </div>
</template>